$(function () {
    //第一步 一进来就显示第一条数据
    //所以一进来就应该发送ajax请求
    $.ajax({
        url: '/category/queryTopCategory',
        type: 'get',
        // data:{},
        success: function (res) {
            console.log(res);

            if (res.rows.length > 0) {
                for (var i = 0; i < res.rows.length; i++) {
                    var item = res.rows[i];
                    //自定义属性 动态绑定id
                    var a = $(`<a href="#" data-id='${item.id}'> ${item.categoryName} </a>`)
                    $('.leftfirst').append(a)

                }

                // if (res.rows.length > 0) {
                var firsrtItem = res.rows[0];
                $('.leftfirst').find('a:first-child').addClass('active').siblings().removeClass('active')

                var ids = $('.leftfirst').find('a:first-child').attr('data-id');
                console.log(ids);

                $.ajax({
                    url: ' /category/querySecondCategory',
                    type: 'get',
                    data: {
                        id: ids,
                    },
                    success: function (res) {
                        console.log(res);

                        if (res.rows.length > 0) {


                            for (var i = 0; i < res.rows.length; i++) {
                                var item = res.rows[i];
                                //自定义属性 动态绑定id
                                var a = $(
                                    `
                                    <li>
                                        <a href="#">
                                            <img src = "${item.brandLogo}" alt="">
                                            <span>${item.brandName}</span>
                                
                                        </a>
                                     </li>
                                     `
                                )
                                $('.ulBox').append(a)
                            }
                        } else {
                            $('.ulBox').html('暂无数据');
                        }

                    },
                    beforeSend: function () {
                        $('.ulBox').html('')
                    }
                })

            }
        },
        error: function (err) {
            console.log(err);

        }

    })

    $('.leftfirst').on('tap', 'a', function () {
        var ids = $(this).attr('data-id');
        console.log(ids);

        $.ajax({
            url: ' /category/querySecondCategory',
            type: 'get',
            data: {
                id: ids,
            },
            success: function (res) {
                console.log(res);

                if (res.rows.length > 0) {


                    for (var i = 0; i < res.rows.length; i++) {
                        var item = res.rows[i];
                        //自定义属性 动态绑定id
                        var a = $(
                            `
                        <li>
                            <a href="#">
                                <img src = "${item.brandLogo}" alt="">
                                <span>${item.brandName}</span>
                    
                            </a>
                         </li>
                         `
                        )
                        $('.ulBox').append(a)
                    }
                } else {
                    $('.ulBox').html('暂无数据');
                }

            },
            beforeSend: function () {
                $('.ulBox').html('')
            }
        })
        $(this).addClass('active').siblings().removeClass('active');
    })


})
    
